<template>
  <view class="hm-empty">
    <el-image :src="emptyImg" width="160px" height="160px"></el-image>
    <text v-if="text" class="hm-empty__text">{{text}}</text>
    <view class="hm-empty__wrap">
      <slot />
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";

const vk = uni.vk;
const baseUrl = vk.getVuex('$app.config.staticUrl.baseUrl');
let props = defineProps({
  text: {
    type: String,
    default: '数据为空'
  },
  imageUlr: {
    type: String,
    default: 'data'
  }
})
let defaultImg = {
  collect: baseUrl + '/avatar-client/images/collect-empty.png',
  data: baseUrl + '/avatar-client/images/data-empty.png'
}
let emptyImg = computed(() => {
  if (props.imageUlr.indexOf('http') > -1) {
    return props.imageUlr
  } else {
    return defaultImg[props.imageUlr]
  }
})
</script>

<style lang="scss" scoped>

  .hm-empty {
    display: flex;
    flex-direction: row;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &__text {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin-top: 16rpx;
      font-size: 28rpx;
      color: rgb(192, 196, 204);
    }
  }

  .hm-slot-wrap {
    justify-content: center;
    align-items: center;
  }
</style>